<template>
  <div class="search-filter">
    <!-- 搜索输入区域 -->
    <div class="search-section">
      <div class="search-input-wrapper">
        <el-input
          ref="searchInputRef"
          v-model="localSearchQuery"
          placeholder="搜索文件..."
          clearable
          class="search-input"
          @input="handleSearchInput"
          @clear="handleClearSearch"
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <el-button 
          type="primary" 
          @click="handleSearch"
          class="search-button"
          :loading="isSearching"
        >
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
        
        <el-dropdown 
          trigger="click" 
          @command="handleSearchCommand"
          class="advanced-dropdown"
        >
          <el-button type="default" class="advanced-button">
            高级
            <el-icon class="el-icon--right">
              <ArrowDown />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="search-name">
                <el-icon><Search /></el-icon>
                按名称搜索
              </el-dropdown-item>
              <el-dropdown-item command="search-content" :disabled="true">
                <el-icon><Document /></el-icon>
                按内容搜索
              </el-dropdown-item>
              <el-dropdown-item command="search-date" :disabled="true">
                <el-icon><Calendar /></el-icon>
                按日期搜索
              </el-dropdown-item>
              <el-dropdown-item divided command="clear-search">
                <el-icon><Close /></el-icon>
                清除搜索
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    
    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-select 
        v-model="localCategoryFilter" 
        placeholder="按类别筛选" 
        class="filter-select" 
        clearable
        @change="handleFilterChange"
      >
        <el-option label="全部类别" value="" />
        <el-option 
          v-for="category in categories" 
          :key="category" 
          :label="category" 
          :value="category" 
        />
      </el-select>
      
      <el-select 
        v-model="localTypeFilter" 
        placeholder="按类型筛选" 
        class="filter-select" 
        clearable
        @change="handleFilterChange"
      >
        <el-option label="全部类型" value="" />
        <el-option label="文件夹" value="directory" />
        <el-option label="文档" value="document" />
        <el-option label="图片" value="image" />
        <el-option label="视频" value="video" />
        <el-option label="音频" value="audio" />
        <el-option label="压缩包" value="archive" />
      </el-select>
      
      <el-button 
        v-if="hasActiveFilters"
        type="default" 
        @click="clearAllFilters"
        class="clear-filters-button"
      >
        <el-icon><Close /></el-icon>
        清除筛选
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { Search, ArrowDown, Close, Document, Calendar } from '@element-plus/icons-vue';
import { debounce } from '../FileExplorer/utils/helpers';

const props = defineProps({
  searchQuery: {
    type: String,
    default: ''
  },
  categoryFilter: {
    type: String,
    default: ''
  },
  typeFilter: {
    type: String,
    default: ''
  },
  categories: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits([
  'update:searchQuery', 
  'update:categoryFilter', 
  'update:typeFilter', 
  'search'
]);

// 响应式状态
const searchInputRef = ref(null);
const isSearching = ref(false);

// 本地变量，用于双向绑定
const localSearchQuery = computed({
  get: () => props.searchQuery,
  set: (value) => emit('update:searchQuery', value)
});

const localCategoryFilter = computed({
  get: () => props.categoryFilter,
  set: (value) => emit('update:categoryFilter', value)
});

const localTypeFilter = computed({
  get: () => props.typeFilter,
  set: (value) => emit('update:typeFilter', value)
});

// 检查是否有活跃的筛选条件
const hasActiveFilters = computed(() => {
  return !!(localCategoryFilter.value || localTypeFilter.value);
});

// 创建防抖搜索函数 - 减少延迟时间提高响应性
const debouncedSearch = debounce(() => {
  emit('search');
}, 300);

// 处理搜索输入
const handleSearchInput = (value) => {
  emit('update:searchQuery', value);
  debouncedSearch();
};

// 处理搜索按钮点击
const handleSearch = () => {
  isSearching.value = true;
  emit('search');
  
  // 模拟搜索完成
  setTimeout(() => {
    isSearching.value = false;
  }, 500);
};

// 处理清除搜索
const handleClearSearch = () => {
  emit('update:searchQuery', '');
  emit('search');
  
  // 聚焦输入框
  nextTick(() => {
    if (searchInputRef.value) {
      searchInputRef.value.focus();
    }
  });
};

// 处理筛选条件变化
const handleFilterChange = () => {
  emit('search');
};

// 清除所有筛选条件
const clearAllFilters = () => {
  emit('update:categoryFilter', '');
  emit('update:typeFilter', '');
  emit('search');
  ElMessage.success('已清除所有筛选条件');
};

// 处理高级搜索命令
const handleSearchCommand = (command) => {
  switch (command) {
    case 'search-name':
      // 聚焦到搜索框
      nextTick(() => {
        if (searchInputRef.value) {
          searchInputRef.value.focus();
        }
      });
      ElMessage.info('请输入要搜索的文件名');
      break;
      
    case 'search-content':
      ElMessage.warning('内容搜索功能即将推出，敬请期待');
      break;
      
    case 'search-date':
      ElMessage.warning('日期搜索功能即将推出，敬请期待');
      break;
      
    case 'clear-search':
      // 清除所有搜索条件
      emit('update:searchQuery', '');
      emit('update:categoryFilter', '');
      emit('update:typeFilter', '');
      emit('search');
      ElMessage.success('已清除所有搜索条件');
      break;
      
    default:
      console.warn('未知的搜索命令:', command);
  }
};

// 监听搜索条件变化，自动触发搜索
watch([localSearchQuery, localCategoryFilter, localTypeFilter], () => {
  debouncedSearch();
});

// 组件挂载后，确保搜索框可以获取焦点
onMounted(() => {
  nextTick(() => {
    if (searchInputRef.value) {
      searchInputRef.value.focus();
    }
  });
});
</script>

<style scoped>
.search-filter {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* 搜索区域 */
.search-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 280px;
  max-width: 500px;
}

.search-button {
  flex-shrink: 0;
  height: 40px;
  padding: 0 20px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.search-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.advanced-dropdown {
  flex-shrink: 0;
}

.advanced-button {
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.advanced-button:hover {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
}

/* 筛选区域 */
.filter-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.filter-select {
  min-width: 160px;
  max-width: 200px;
}

.clear-filters-button {
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  font-weight: 500;
  color: #f56c6c;
  border-color: #f56c6c;
  transition: all 0.2s ease;
}

.clear-filters-button:hover {
  background-color: #fef0f0;
  border-color: #f56c6c;
  color: #f56c6c;
}

/* 输入框样式优化 */
:deep(.el-input__wrapper) {
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 选择器样式优化 */
:deep(.el-select .el-input__wrapper) {
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

:deep(.el-select .el-input__wrapper:hover) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 下拉菜单样式优化 */
:deep(.el-dropdown-menu) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #e5e7eb;
}

:deep(.el-dropdown-menu__item) {
  padding: 8px 16px;
  font-size: 14px;
  transition: all 0.2s ease;
}

:deep(.el-dropdown-menu__item:hover) {
  background-color: #f5f7fa;
  color: #409eff;
}

/* 响应式布局 */
@media (max-width: 1024px) {
  .search-input-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input {
    min-width: 100%;
    max-width: 100%;
  }
  
  .search-button,
  .advanced-button {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .search-filter {
    padding: 12px;
    gap: 12px;
  }
  
  .filter-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-select,
  .clear-filters-button {
    width: 100%;
    max-width: 100%;
  }
  
  .search-input-wrapper {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .search-filter {
    padding: 8px;
    margin-bottom: 12px;
  }
  
  .search-button,
  .advanced-button,
  .clear-filters-button {
    height: 36px;
    font-size: 14px;
  }
  
  :deep(.el-input__wrapper) {
    height: 36px;
  }
}

/* 动画效果 */
.search-filter {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 加载状态样式 */
.search-button.is-loading {
  pointer-events: none;
}

/* 焦点状态优化 */
.search-input:focus-within {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}
</style> 